<template>
	<div>
		<el-form :model="form" :rules="rules" ref="fromref" class="form-box"> 
		<h3 style="color: #606266;">登录页面</h3> <el-form-item prop="name"> 
		<el-input v-model="form.name" prefix-icon="el-icon-user"></el-input>
		 </el-form-item> <el-form-item prop="password"> 
		 <el-input v-model="form.password" prefix-icon="el-icon-lock"></el-input>
		  </el-form-item> 
		  <el-form-item > 
		  <el-button type="primary" @click="submitForm('fromref')">登录</el-button> 
		  <el-button @click="resetForm('fromref')">重置</el-button>
		   </el-form-item> 
		   </el-form>
</div>
</template>

<script>
	export default {
		data(){
			return {
				form : {
					name : '',
					password : ''
				},
				rules : {
					name :[
						{ required : true , message: '请输入账号', trigger: 'blur' },
						{ min: 3, max: 15, message: '长度在3到5个字符',trigger: 'blur'  }
					],
					password:[
						{ required: true, message:'请输入密码', trigger: 'blur' },
						{ min: 3, max: 15, message: '长度在3 到 5 个字符',trigger:'blur' }
					]
				}
			}
		},
		methods:{
			resetForm(formName) {
				this.$refs[formName].resetFields()
			},
			submitForm(formName){
				var params = new URLSearchParams();
				params.append("username",this.from.name);
				params.append("password",this.from.password);
				var res = this.$http.post("/vueLogin")
				this.$refs[formName].validate((valid)=>{
					if(valid){
						this.$message.success("ghjk")
						window.sessionStorage.setItem('token','yonghu')
						this.$router.push("/home")
					}else{
						this.$message.error("cuo")
					}
				})
			}
		}
	}
		
</script>

<style>
	.form-box { 
		width: 350px;
		/* border: 1px solid blue; */ 
		padding: 20px 50px;
		 margin: 0px auto;
		 margin-top: 200px; 
		 box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		  border-radius: 10px; text-align: center;
		  background-color: white;
		}
</style>
